﻿<template>
  <a-modal centered :width="640" title="新增用户" :visible="modifyEntity.showModify" @cancel="handleRefresh">
    <!--保存按钮-->
    <template slot="footer">
      <a-row>
        <a-col :span="8">
          <a-tag color="blue">操作完是否继续？</a-tag>
          <a-switch v-model="hasClose" :loading="loading">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </a-col>
        <a-col :span="16">
          <a-button icon="close-circle" @click="handleRefresh">取消</a-button>
          <a-divider type="vertical" />
          <a-button icon="reload" @click="handleReset" :loading="loading">重置</a-button>
          <a-divider type="vertical" />
          <a-button icon="check-circle" :loading="loading" @click="handleSubmit">保存</a-button>
        </a-col>
      </a-row>
    </template>
    <a-spin :spinning="spinning">
      <a-form :form='form' :labelCol='labelCol' :wrapperCol='wrapperCol'>
        <a-row>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='账号'>
              <a-input v-decorator="['account', { rules: [{ required: true, message: '请输入账号' }] }]" placeholder='请输入账号' />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='昵称'>
              <a-input v-decorator="['nickName', { rules: [{ required: true, message: '请输入昵称' }] }]" placeholder='请输入昵称' />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="modifyEntity.operation == this.operationFlag.Add">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="密码">
              <a-input-password v-decorator="[
                'pwd',
                { rules: [{ required: true, message: '请输入密码' }] },
              ]" placeholder="请输入密码" />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="二次密码">
              <a-input-password v-decorator="[
                'passwordConfirm',
                { rules: [{ required: true, message: '请输入二次密码' }] },
              ]" placeholder="请输入二次密码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='用户类型'>
              <a-select allowClear v-decorator="[
                'userType',
                { rules: [{ required: true, message: '请选择用户类型' }] },
              ]" placeholder="请选择用户类型" style="width: 100%">
                <a-select-option v-for="item in userTypeList" :key="item" :value="item">{{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='手机号'>
              <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号' }] }]" placeholder='请输入手机号' />
            </a-form-item>
          </a-col>

        </a-row>
        <a-row>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='账户金额'>
              <a-input-number v-decorator="['balance', { rules: [{ required: true, message: '请输入账户金额' }] }]" placeholder='请输入账户金额' style='width: 100%' :step='0.001' :precision='5' />
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='状态'>
              <a-switch v-decorator="['status', { valuePropName: 'checked', initialValue: false }]" un-checked-children='否' checked-children='是' />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='返现设定'>
              <a-input-number v-decorator="['cashbackAmountLimit', { rules: [{ required: true, message: '请输入返现设定' }] }]" placeholder='请输入返现设定' style='width: 100%' :step='0.001' :precision='5' />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='消费额设定'>
              <a-input-number v-decorator="['consumptionAmountLimit', { rules: [{ required: true, message: '请输入消费额设定' }] }]" placeholder='请输入消费额设定' style='width: 100%' :step='0.001' :precision='5' />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='邮箱'>
              <a-input v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱' }] }]" placeholder='请输入邮箱' />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='微信账户'>
              <a-input v-decorator="['weChartAccount', { rules: [{ required: true, message: '请输入微信账户' }] }]" placeholder='请输入微信账户' />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='收款码设定'>
              <img-upload :fileList="imgList" @uploadCallBack="imgUploadCallBack" />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label='描述'>
              <a-textarea v-decorator="['description']" placeholder='请输入描述' :rows='4' />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="所属站点">
              <a-select mode="multiple" allowClear show-search v-decorator="[
                'tenantIds',
                { rules: [{ required: true, message: '请选择所属站点' }] },
              ]" placeholder="请选择所属站点" style="width: 100%">
                <a-select-option v-for="item in tenantIdsList" :key="item.id" :value="item.id">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> 
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import imgUpload from "_c/imgUpload";
import { queryTenantsList } from "@/views/tenantsModule/tenants/tenants";
import { getUser, addUser, updateUser } from './user'
export default {
  components: { imgUpload },
  props: {
    modifyEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: "",
          // 页面操作类型
          operation: this.operationFlag.Add,
          // 是否展示编辑页面
          showModify: false,
        }
      },
    },
  },
  data() {
    return {
      // 显示描述宽度
      labelCol: { md: { span: 8 }, xs: { span: 24 }, sm: { span: 12 } },
      // 输入框宽度
      wrapperCol: { md: { span: 16 }, xs: { span: 24 }, sm: { span: 12 } },
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      // 是否只读
      readonly: false,
      form: this.$form.createForm(this),
      entity: {},
      tenantIdsList: [],
      userTypeList: ['普通用户', '分销用户'],
      // 图片上传
      imgList: [],
    };
  },
  created() {
    queryTenantsList().then((res) => {
      this.tenantIdsList = res.data;
    });
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 图片上传回调
    imgUploadCallBack(imgList) {
      this.imgList = imgList;
    },
    //#region 加载数据

    loadData() {
      this.form.resetFields() // 重置参数值
      //修改，详情获取详细信息
      if (this.modifyEntity.operation !== this.operationFlag.Add) {
        this.spinning = true;
        // 编辑状态是只读
        this.readonly = true;
        let that = this
        getUser(this.modifyEntity.id).then((res) => {
          if (res.code != 200) {
            this.$notification.warning({ description: "数据不存在" });
            this.$emit("handleRefresh");
            return false;
          }
          that.entity = res.data
          if (that.entity.wxQrCode) {
            that.imgList = [
              {
                uid: "-1",
                name: "image01.png",
                status: "done",
                url: that.entity.wxQrCode,
                thumbUrl: that.entity.wxQrCode,
              },
            ];
          }
          var setData = {}
          Object.keys(this.form.getFieldsValue()).forEach((item) => {
            setData[item] = that.entity[item]
          })
          that.form.setFieldsValue(setData)
          that.spinning = false;
        })
          .catch((error) => {
            that.spinning = false;
          });
      }
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this
      this.spinning = true
      this.form.validateFields((errors, values) => {
        if (!errors) {
          if (that.modifyEntity.operation === that.operationFlag.Add) {
            addUser(values).then((res) => {
              that.submitResult(res)
            })
              .catch((error) => {
                that.spinning = false;
              });
          } else {
            that.entity = Object.assign(that.entity, that.form.getFieldsValue())
            if (that.imgList) {
              that.entity.wxQrCode = that.imgList[0]?.thumbUrl;
            }
            updateUser(that.entity).then((res) => {
              that.submitResult(res)
            })
              .catch((error) => {
                that.spinning = false;
              });
          }
        } else {
          this.spinning = false
        }
      })
    },
    // 保存结果
    submitResult(res) {
      if (res.code == 200) {
        this.$notification.success({ description: res.msg })
        if (!this.hasClose) {
          this.$emit('handleRefresh')
        }
      } else {
        this.$notification.error({ description: res.msg })
      }
      this.spinning = false
    },
    //#endregion

    //#region  取消、关闭、重置
    // 取消、关闭
    handleRefresh() {
      this.spinning = false
      this.$emit('handleRefresh')
    },
    // 重置
    handleReset() {
      this.loadData()
    },
    //#endregion
  },
}
</script>
